


<!-- 
    DashboardAside使用AsideHelper组件，该组件需要接收一个数组作为参数，
    该数组是为了递归渲染菜单的，数组中的每个元素都是一个对象，对象中包含菜单的名称、路径、子菜单等属性。

    格式如下：

    menus: [
        {
        menuID: '5',                        primary key
        menuIcon: 'Location',               图标
        menuPath: '/myDetail',              路径
        menuName: '我的',                   菜单名称
        menuComponent: '../views/common/userInfo/Detail.vue',           vue主件
        children: [                         子主件
            {
                menuID: '16',               
                menuIcon: 'Location',
                menuPath: '/updatepassword',
                menuName: '修改密码'
                menuComponent: '../views/common/userInfo/Detail.vue',
            },
        }
    ]

 -->

<script>
export default {
    name: 'menuTree',
    props: ['menus'],            //重点
}
</script>

<template>
    <div id="aside-helper">
        <template v-for="item in menus" :key="item.menuID">
            <!--      分为两种方式渲染：有子菜单和没有子菜单-->
            <el-sub-menu :index="item.menuPath" v-if="item.children">
                <template #title>
                    <el-icon>
                        <component :is="item.menuIcon"></component>
                    </el-icon>
                    <span>{{ item.menuName }}</span>
                </template>
                <!--        有子菜单的继续遍历（递归）-->
                <menuTree :menus="item.children"></menuTree>
            </el-sub-menu>
            <!--      没有子菜单-->
            <el-menu-item :index="item.menuPath" v-else>
                <template #title>
                    <el-icon>
                        <component :is="item.menuIcon"></component>
                    </el-icon>
                    <span>{{ item.menuName }}</span>
                </template>
            </el-menu-item>
        </template>
    </div>
</template>

<style scoped></style>
